<template>
  <el-dialog
    v-model="dialogVisible"
    title="新增/修改"
    width="720px"
    :before-close="handleClose"
    append-to-body
    destroy-on-close
  >
    <el-form
      label-position="right"
      label-width="80px"
      :model="formModel"
      ref="formInsRef"
      :rules="rules"
    >
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="formModel.name" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单key" prop="key">
            <el-input v-model="formModel.key" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单路径" prop="path">
            <el-input v-model="formModel.path" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="order">
            <el-input
              v-model="formModel.order"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="父级菜单" prop="pid">
            <el-tree-select
              v-model="formModel.pid"
              :data="systemStore.menu"
              filterable
              check-strictly
              show-checkbox
              :render-after-expand="false"
            >
          </el-tree-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单图标" prop="icon">
            <SelectIcon v-model="formModel.icon" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单类型" prop="menuType">
            <SelectDict v-model="formModel.menuType" queryFiled="type" queryValue="MENU_TYPE" valueFiled="id" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="扩展属性" prop="ext">
            <el-input
              v-model="formModel.ext"
              placeholder="请输入"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6 }"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="js" setup>
import { setModel, omit } from "@/utils"
import { ref, reactive, onMounted } from "vue"
import { menuUpsertApi, menuAddApi } from "@/api/menu"
import { ElMessage } from "element-plus"
import { useSystemStore } from "@/stores"
import SelectDict from "@/components/SelectDict/index.vue"

const systemStore = useSystemStore()
const emits = defineEmits(["success"])
const dialogVisible = ref(false)
const data = ref()
const formInsRef = ref()
const formModel = ref({
  id: "",
  name: "",
  key: "",
  path: "",
  icon: "",
  pid: "",
  menuType: null,
  ext: null,
})
const rules = reactive({
  name: [{ required: true, message: "请输入" }],
  key: [{ required: true, message: "请输入" }],
  path: [{ required: true, message: "请输入" }],
  pid: [{ required: false, message: "请输入" }],
  icon: [{ required: false, message: "请输入" }],
  menuType: [{ required: false, message: "请输入" }],
})

const handleClose = () => {
  // done?.()
  formInsRef.value?.resetFields()
  dialogVisible.value = false
}

const open = ({ row } = {}) => {
  // Object.assign(formModel, setModel(formModel, row))
  formModel.value = {
    ...formModel.value,
    ...setModel(formModel.value, row),
  }
  data.value = row
  dialogVisible.value = true
}

const buildParams = (params = {}) => {
  const postParams = {
    ...params,
    ...formModel.value,
    ext: JSON.parse(formModel.value?.ext || '{}')
  }
  return postParams
}

const submitHandler = async () => {
  const params = buildParams();
  if (params?.id) {
    await menuUpsertApi(params)
  } else {
    await menuAddApi(omit(params, ['id']))
  }
  ElMessage.success("操作成功")
}

const onClose = () => {
}

const onSubmit = () => {
  if (!formInsRef.value) return
  formInsRef.value.validate(async valid => {
    if (valid) {
      console.log("submit!")
      await submitHandler()
      await systemStore.loadMenuTree()
      await systemStore.loadCurrentUserMenuList()
      handleClose()
      emits("success")
    } else {
      console.log("error submit!")
    }
  })
}

onMounted(() => {
  systemStore.loadMenuTree()
})

defineExpose({
  open,
})
</script>
